'use client';

import NavigationBar from "@/components/ui/navigation-bar";
import VerticalNavigation from "@/components/ui/vertical-navigation";
import NodeList from "@/components/ui/node-list";
import ResourceList from "@/components/ui/resource-list";
import CatalogList from "@/components/ui/catalog-list";
import Designer from "@/components/core/designer";

import { ReactFlowProvider } from "@xyflow/react";
import NotificationsPanel from "@/components/ui/notifications-toast";
import Editor from "@/components/ui/editor";
import FeedbackPanel from "@/components/ui/feedback-panel";
import { useSidebarStore } from "@/stores/sidebar-store";
import { useEffect } from "react";
import FloatingPanel from "@/components/ui/floating-panel";

export default function Page() {
  const { floatingPanels, setFloatingPanelOpen } = useSidebarStore();

  useEffect(() => {
    const updateTitle = () => {
      document.title = 'Studio';
    };
    
    // Update after component mounts
    updateTitle();
  }, []);

  return (
    <main className="bg-white h-screen overflow-hidden">
      <NavigationBar />
      {/* Divider */}
      <div className="h-px bg-gray-200"></div>
      <div className="flex h-[calc(100vh-50px)]">
        <VerticalNavigation />
        <div className="flex flex-1 overflow-y-auto">
          <ReactFlowProvider>
            <div className="flex-grow h-full">
              <Designer />
            </div>
            <Editor />
          </ReactFlowProvider>
        </div>
      </div>

      {/* Floating Panels */}
      <FloatingPanel
        title="Components"
        isOpen={floatingPanels.components}
        onClose={() => setFloatingPanelOpen('components', false)}
        width="w-72"
        height="h-[calc(100vh-80px)]"
        position={{ left: 62, top: 65 }}
      >
        <NodeList />
      </FloatingPanel>

      <FloatingPanel
        title="Canvas"
        isOpen={floatingPanels.canvas}
        onClose={() => setFloatingPanelOpen('canvas', false)}
        width="w-72"
        height="h-[calc(100vh-80px)]"
        position={{ left: 62, top: 65 }}
      >
        <ResourceList />
      </FloatingPanel>

      <FloatingPanel
        title="EventCatalog Resources"
        isOpen={floatingPanels.catalog}
        onClose={() => setFloatingPanelOpen('catalog', false)}
        width="w-72"
        height="h-[calc(100vh-80px)]"
        position={{ left: 62, top: 65 }}
      >
        <CatalogList />
      </FloatingPanel>

      <NotificationsPanel />
      <FeedbackPanel />
    </main>
  );
}